<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{msg}}</h1>
        <!-- <a href="http://baidu.com" class style="" title>百度一下</a> 
        上面这些都称为标签上的属性

        -->
        <!-- <h1 class="box1" shenguoshuai="xx"></h1> -->
        <!-- v-bind 将标签上的属性变为动态   简写为： -->
        <a v-bind:href="url">百度一下</a>
        <p :title="title">xxxx</p>
    </div>
    <script>
        // 原生js当中操作标签上的属性  获取getAttribute  设置setAttribute
        // console.log(document.querySelector('.box1').getAttribute('shenguoshuai'));
        // setAttribute
        const vm = new Vue({
            el:'.box',
            data:{
                msg:'向前看',
                url:'http://baidu.com',
                title:'这是一个标题'
            }
        })
    </script>
</body>
</html>